<!-- 新闻配置 -->
<template>
  <el-button type="primary" @click="add()" style="margin-bottom: 10px;">新增</el-button>
  <el-table :data="data.tableData" row-key="id" table-layout="auto" style="width: 100%">
    <el-table-column label="图片" width="">
      <template #default="scope">
        <el-image :src="scope.row.imageUrl" style="width: 100px; height: 100px" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="关联子栏目" width="" />
    <el-table-column prop="title" label="标题名称" show-overflow-tooltip width="200" />
    <el-table-column label="内容" show-overflow-tooltip width="">
      <template #default="scope">
        <div v-html="scope.row.contentText"></div>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="发布时间" width="" />
    <el-table-column prop="" label="操作" width="" fixed="right">
      <template #default="scope">
        <el-button type="danger" @click="deleteColumn(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <dialogForm ref="dialogFormRef" @resetList="getList"></dialogForm>
</template>
  
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { listNew, updateNew } from '@/api/allApi'
import dialogForm from './dialogForm.vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'

// let tableData = reactive([])
const pageNum = ref(1) //第几页
const data = reactive({
	tableData: []
})

onMounted(() => {
	getList()
})

const getList = () => {
	listNew({
		websiteId: Number(localStorage.getItem('WebsiteId')) //网站id 1：鞍钢官网 2：博物馆
	}).then((res: any) => {
		if (res.code === 0) {
			data.tableData = []
			res.data.forEach((item: any) => {
				data.tableData.push({
					...item,
					contentText: new DOMParser().parseFromString(item.content, 'text/html').body.textContent,
				})
			})
		} else {
			ElMessage.success(res.msg)
		}
	})
}
const dialogFormRef = ref()
const add = () => {
	if (data.tableData.length >= 8) {
		return ElMessage.error('新闻仅可添加八条！')
	}
	dialogFormRef.value.init()
}
const deleteColumn = (row: any) => {
	ElMessageBox.confirm(`确定删除这个内容吗？`, '警告', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		updateNew({ id: row.id, show: 0,websiteId: Number(localStorage.getItem('WebsiteId')) }).then((res: any) => {
			if (res.code === 0) {
				ElMessage.success('删除成功')
				getList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	})
}
</script>
  
<style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
	width: max-content;
	display: inline-block;
}
</style>
  